<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="decorator" content="default" />
</head>

<body>
	<div class="row">
		<div class="col-sm-4">
			<div class="widget-box">
				<div class="widget-header header-color-grey">
					<h4 class="lighter smaller">类别</h4>
					<div class="widget-toolbar">
						<a href="#" onclick="addDict(this); return false;"
							data-action="settings"> <i class="icon-plus"></i>
						</a>
					</div>
				</div>
				<div class="widget-body">
					<div class="widget-main padding-0">
						<form class="form-horizontal" role="form" name="codeDictSaveForm"
							id="codeDictSaveForm"
							data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
							data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
							data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">
							<div id="addDiv" class="col-xs-12 clearfix collapse">
								<div class="space-6"></div>
								<div class="form-group">
									<label for="codeNoOne" class="col-md-3 control-label">编码</label>
									<div class="col-md-9">
										<input type="text" class="col-xs-12" id="codeNoOne"
											data-bv-notempty data-bv-notempty-message="编码不能为空"
											name="codeNo" placeholder="编码">
									</div>
								</div>

								<div class="form-group">
									<label for="codeNameOne" class="col-md-3 control-label">类型</label>
									<div class="col-md-9">
										<input type="text" class="col-xs-12" id="codeNameOne"
											data-bv-notempty data-bv-notempty-message="类型不能为空"
											name="codeName" placeholder="名称">
									</div>
								</div>
								<div class="row">
									<div class="col-sm-12">
										<div class="btn-group  pull-right">
											<button class="btn btn-xs btn-success" type="button"
												onclick="saveDict()">
												<i class="icon-save"></i> 保存
											</button>
											<button class="btn btn-xs btn-danger" type="reset"
												onclick="abort();">
												<i class="icon-remove"></i> 取消
											</button>
										</div>
									</div>
								</div>
								<div class="space-6"></div>
							</div>
							<table id="dictTable" class="table table-striped  table-hover">
								<thead>
									<tr>
										<th></th>
										<th>编码</th>
										<th>类型</th>
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
						</form>
					</div>
				</div>
			</div>
		</div>
		<div class="col-sm-4">
			<div class="widget-box" id="detailView">
				<div class="widget-header header-color-grey">
					<h4 class="lighter smaller">参数项</h4>
					<div class="widget-toolbar">
						<a href="#" onclick="addCodeInfo();return false;"
							data-action="settings"> <i class="icon-plus"></i>
						</a>
					</div>
				</div>

				<div class="widget-body">
					<div class="widget-main padding-8">
						<div id="task-tab" class="tab-pane active">
							<h4 class="smaller lighter green">
								<i class="icon-list"></i> <span id="codeInfoTitle">类别名</span>
							</h4>

							<ul id="codeInfoList" class="item-list">

							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-sm-4">
			<div class="widget-box" id="detailWidget">
				<div class="widget-header widget-header-flat">
					<h4 class="lighter smaller" id="sapnInfo">详细信息</h4>
				</div>
				<div class="widget-body">
					<div class="widget-main no-padding">
						<form class="form-horizontal" role="form" id="codeInfoEditForm"
							name="codeInfoEditForm">
							<input type="hidden" id="codeInfoId" name="codeInfoId">
							<fieldset>
								<div class="form-group sr-only">
									<label class="col-md-3 control-label" for="id">id</label>
									<div class="col-md-9">
										<input type="text" id="uuid" name="uuid" placeholder="ID"
											class="form-control"> <input type="text"
											id="codeDictNo" name="codeDictNo" class="form-control">
										<input type="text" id="parentCodeId" name="parentCodeId"
											class="form-control" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label no-padding-right"
										for="codeNo">参数编码</label>
									<div class="col-md-9">
										<input type="text" id="codeNo" name="codeNo"
											placeholder="参数编码" class="col-xs-12" data-bv-notempty
											data-bv-notempty-message="参数编码必填">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label no-padding-right"
										for="codeName">参数名称</label>
									<div class="col-md-9">
										<input type="text" id="codeName" name="codeName"
											placeholder="参数名称" class="col-xs-12" data-bv-notempty
											data-bv-notempty-message="参数名称必填">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label no-padding-right"
										for="menuOrder">顺序序号</label>
									<div class="col-md-9">
										<input type="text" id="indexNo" name="indexNo"
											placeholder="顺序序号" class="col-xs-12" data-bv-digits
											data-bv-digits-message="序号只能为数字">
									</div>
								</div>
							</fieldset>
							<div class="form-actions center">
								<button type="button" class="btn btn-sx btn-success"
									onclick="saveInfo()">
									<i class="icon-save icon-on-left"></i>保存
								</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>


	<!-- 
<script src="${ctx}/static/ace/assets/js/chosen.jquery.min.js"></script>
 -->
	<!-- tree  fuelux -->
	<script src="${ctx}/static/ace/assets/js/fuelux/fuelux.tree.min.js"></script>
	<script>
var datatable;
//查询
function queryRole() {
	var oSettings = datatable.fnSettings();
	oSettings._iDisplayStart = 0;
	datatable.fnClearTable(0); //清空数据
	datatable.fnDraw(); //重新加载数据 
}
//添加类别
function addDict(){
	$("#addDiv").collapse('show');
	$("#addBtn").hide();
	
}
//保存类别
function saveDict(){
	if(!$('#codeDictSaveForm').data('bootstrapValidator').validate().isValid()){
		return;
	}  
	 Otod.ajax({
		url:"${ctx}/sys/code/addCodedict.do",
		data: $('#codeDictSaveForm').serialize(),
		contentType: "application/x-www-form-urlencoded;",
		successFn:function(){
			$('#codeDictSaveForm button[type=reset]').click();		//重置form
			queryRole();
		}
	});  	
}
/**
 * 修改数据
 */
function saveInfo(){
	if(!$('#codeInfoEditForm').data('bootstrapValidator').validate().isValid()){
		return;
	}
	
	var dictNo = $("#codeInfoId").val();
	$("#codeDictNo").val(dictNo);
	Otod.ajax({
			url:"${ctx}/sys/code/updateCodeInfo.do",
			type: "POST",
			data: $('#codeInfoEditForm').serialize(),
			contentType: "application/x-www-form-urlencoded;",
			successFn:function(){
				Otod.Msg.info("保存成功");
				$("#detailWidget").hide();
				
				searchCodeInfo(dictNo);
			}
	});  	
}
//取消
function abort() {
	//清空数据
	$("#addDiv").collapse('hide');
	$("#addBtn").show();
}

//删除类别 

function delDict(id,codeDictName){
	
	Otod.Msg.confirm('确定删除此类别【'+codeDictName+'】?',"删除确认", function(){
     
      	delDictOk(id);
      
  });
}

//删除方法 
function delDictOk(id){
	Otod.ajax({
	    url: "${ctx}/sys/code/delDict.do?dictId=" + id,
	    type: "GET",
	    successFn: function(data) {
	    	queryRole();
	    }
	});
}


//添加详细信息
function addCodeInfo(){
	
	var title=$("#codeInfoTitle").text();
	if(title=="类别名"){
		Otod.Msg.info("请选择添加的类名");
		return;
	}
	$("#detailWidget").show();
	$("#sapnInfo").text("新增详细信息");
	$("#codeNo").removeAttr("readonly");
	//把详细信息里的数据清空
	$("#uuid").val("");
	//参数类型的id
	$("#codeDictNo").val("");
	//父菜单的id
	$("#parentCodeId").val("");
	//参数编码
	$("#codeNo").val("");
	//参数名称
	$("#codeName").val("");
	//顺序号
	$("#indexNo").val("");
	//调用保存的function 函数	
}
//修改详细信息
function editCodeInfo(id,name){
	//id就是asmg_t_code_info 中的uuid
	//得到数据
	$("#detailWidget").show();
	//查询出相关数据
		$("#sapnInfo").text("修改详细信息");
		Otod.ajax({
			url:"${ctx}/sys/code/getCodeInfoById.do?uuid="+id,
			type: "GET",
			successFn:function(data){
					$("#codeNo").attr("readonly","readonly");
					//uuid
					$("#uuid").val(data.uuid);
					//参数类型的id
					$("#codeDictNo").val(data.codeDictNo);
					//父菜单的id
					$("#parentCodeId").val(data.parentCodeId);
					//参数编码
					$("#codeNo").val(data.codeNo);
					//参数名称
					$("#codeName").val(data.codeName);
					//顺序号
					$("#indexNo").val(data.indexNo);		
			}
		});
}
//删除详细信息
function delCodeInfo(id){
	Otod.Msg.confirm('确定删除此参数项',"删除确认", function(){
	    	  Otod.ajax({
	    		    url: "${ctx}/sys/code/delInfo.do?infoId=" + id,
	    		    type: "GET",
	    		    successFn: function(data) {
	    		    	$("#codeInfoList li[liId='"+id+"']").remove();
	    		    }
	    		}); 
	  });
}

//查询参数项列表
function searchCodeInfo(dictNo,dictName){
	if(dictName){
		$("#codeInfoTitle").text(dictName);
	}
	//当点击类别的时候把dictNo设置到隐藏域中
	$("#codeInfoId").val(dictNo);
	$("#detailView").show();
	//把修改隐藏
	$("#detailWidget").hide();
	//
	Otod.ajax({
		url:"${ctx}/sys/code/queryCodeInfo.do",
		data: dictNo,
		successFn: function(data){
			var sb = new StringBuffer();
			var temp;
			$.each(data, function(i, n){
				sb.append('<li class="');
				temp = (i+1) % 4;							//循环4种颜色
				switch(temp){
					case 1: sb.append('item-orange'); break;
					case 2: sb.append('item-red'); break;
					case 3: sb.append('item-blue'); break;
					default:sb.append('item-default');
				}
				
				sb.append(' clearfix" liId="').append(n.uuid).append('">');
				sb.append('		<label class="inline">');
				sb.append('			<span class="lbl">');
				sb.append('【').append(n.codeNo).append('】').append(n.codeName);
				sb.append('			</span>');
				sb.append('		</label>');

				sb.append('		<div class="pull-right action-buttons">');
				sb.append('			<a href="#" class="blue" onclick="').append("editCodeInfo('").append(n.uuid).append("','").append(n.codeName).append("');return false;").append('" >');
				sb.append('				<i class="icon-pencil bigger-130"></i>');
				sb.append('			</a>');

				sb.append('			<span class="vbar"></span>');

				sb.append('			<a href="#" class="red" onclick="').append("delCodeInfo('").append(n.uuid).append("');return false;").append('" >');
				sb.append('				<i class="icon-trash bigger-130"></i>');
				sb.append('			</a>');
				sb.append('		</div>');
				sb.append('</li>');
			});
			$("#codeInfoList").html(sb.toString());
		}
	 });
}

$(document).ready(function() {
	//把参数列表宽隐藏
	$("#detailWidget").hide();
	//详细信息框隐藏
	$("#detailView").hide();
	$('#codeDictSaveForm').bootstrapValidator();
	$('#codeInfoEditForm').bootstrapValidator();
		//初始化下拉控件
		$(".select2").select2(); 

		//定义列
		var dictTableColums = [
	            {
					"mData":"uuid",
					"sClass": "center",
					"bSortable": false,
					"mRender" : function(data, type, row) {
						return '<a no="'+row.codeDictNo+'" name="'+row.codeDictName+'" class="red" href="javascript:delDict(\''+data+'\',\''+row.codeDictName+'\')"><i class="icon-trash bigger-130"></i></a>';
					}
	            },
	            {"mData":"codeDictNo"},
	            {"mData": "codeDictName"}
	    ];
		
	    //初始化dataTable
		datatable = $('#dictTable').dataTable( {
	    	'sAjaxSource': '${ctx}/sys/code/queryDict.do',	//请求数据源 
	    	"fnServerData": function(sSource, aoData, fnCallback,oSettings){
	    		//$.extend(aoData,$('#dictQueryForm').serializeArray());
	    		$.ajax({
		    		dataType: 'json',
		    		url : sSource,
		    		data: aoData,
		    		success: fnCallback
	    		});
	    	},
	    	//"sServerMethod":"post",  
			'bServerSide':true,							//是否启动服务器端数据导入
			"bLengthChange" : false,
			"bInfo" : true,
			"bPaginate" : true,
	        'bFilter': false,                       	//是否使用内置的过滤功能。
	        'aoColumns': dictTableColums,
	        "sDom": '<"toolbar">frtip', 
	        "oLanguage": oLanguage
		});
	    

	    //设置列表选中效果
		$("#dictTable tbody").on('click','tr',function(e) {
		        if ( $(this).hasClass('row_selected') ) {
		            //$(this).removeClass('row_selected');
		        }else{
		        	datatable.$('tr.row_selected').removeClass('row_selected');
		            $(this).addClass('row_selected');
		            var aEl = $(this).find("td a:first");
		            searchCodeInfo(aEl.attr("no"),aEl.attr("name"));
		            //aEl.attr("no")  得到具体的id
		        }
		 });
	});
</script>
</body>
</html>
